<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>路由管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-row>
          <el-button type="success" class="handle-del mr10" @click="routeModalOpen('add')">新增路由</el-button>
          <el-input v-model="searchText" placeholder="筛选关键词" class="handle-input mr10"></el-input>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" style="float:right;" @click="check()">路由验证</el-button>
          <el-button type="primary" style="float:right;" @click="refresh()">刷新接口</el-button>
        </el-row>
      </div>
      <el-table
        :data="tableData"
        ref="table"
        :row-key="rowKey"
        :expand-row-keys="expands"
        @row-click="toggleRowExpansion"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table :data="props.row.filterList" stripe border style="width: 100%">
              <el-table-column prop="filterName" label="过滤器名称" width="180"></el-table-column>
              <el-table-column prop="filterValue" label="过滤器值" width="180"></el-table-column>
              <el-table-column prop="filterKey" label="过滤器Key" width="180"></el-table-column>
              <el-table-column prop="filterKeyExt" label="过滤器扩展key" width="180"></el-table-column>
              <el-table-column prop="filterValueExt" label="过滤器扩展值" width="180"></el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button type="primary" @click="filterModalOpen('modify',scope)">修改</el-button>
                  <el-button type="danger" @click="delFilter(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column prop="routeName" label="路由名称" width="180"></el-table-column>
        <el-table-column prop="path" label="路径" width="180"></el-table-column>
        <el-table-column prop="order" label="order" width="60"></el-table-column>
        <el-table-column prop="uri" label="URI" width="180"></el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="gmtModified" label="更新时间" width="180"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="success" @click="filterModalOpen('add',scope)">新增过滤器</el-button>
            <el-button type="primary" @click="routeModalOpen('modify',scope)">修改</el-button>
            <el-button type="danger" @click="routeDel(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 路由弹出框 -->
    <el-dialog :title="routeTitle" :visible.sync="routeModal" width="32%">
      <el-form ref="form" :model="routeModalForm" label-width="100px">
        <el-form-item label="路由名称">
          <el-input v-model="routeModalForm.routeName"></el-input>
        </el-form-item>
        <el-form-item label="映射路径">
          <el-input v-model="routeModalForm.path"></el-input>
        </el-form-item>
        <el-form-item label="映射URL">
          <el-input v-model="routeModalForm.uri"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="routeModal = false">取 消</el-button>
        <el-button type="primary" @click="routeModalSave">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 过滤器弹出框 -->
    <el-dialog :title="filterTitle" :visible.sync="filterModal" width="40%">
      <el-form ref="filterForm" :rules="rules" :model="filterModalForm" label-width="180px">
        <el-form-item label="过滤器名称" prop="filterName">
          <el-input v-model="filterModalForm.filterName"></el-input>
        </el-form-item>
        <el-form-item label="过滤器KEY值" prop="filterKey">
          <el-input v-model="filterModalForm.filterKey"></el-input>
        </el-form-item>
        <el-form-item label="过滤器值" prop="filterValue">
          <el-input v-model="filterModalForm.filterValue"></el-input>
        </el-form-item>
        <el-form-item label="过滤器扩展信息KEY值" prop="filterKeyExt">
          <el-input v-model="filterModalForm.filterKeyExt"></el-input>
        </el-form-item>
        <el-form-item label="过滤器扩展信息值" prop="filterValueExt">
          <el-input v-model="filterModalForm.filterValueExt"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="filterModal = false">取消</el-button>
        <el-button type="primary" @click="filterModalSave('filterForm')">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "routeManage",
  data () {
    return {
      //搜索框内的值
      searchText: "sdf",
      //路由管理下的table表格的数据
      tableData: [],
      /* 获取当前行 */
      rowId: '',
      expands: [],
      //新增路由弹窗标识符，相当于id，通过控制true和false来表示显示和隐藏
      routeTitle: "新增路由",
      routeSelectId: null,
      routeIsAdd: true,
      routeModal: false,
      routeModalForm: {
        routeName: "sdf",
        path: "sdfsdf",
        uri: '',
        order: "0",
        filterList: []
      },
      //新增路由里新增过滤器弹窗标识符
      filterTitle: "新增过滤器",
      filterModal: false,
      filterIsAdd: false,
      filterId: "",
      routeId: "",
      filterModalForm: {
        filterName: "",
        filterKey: "",
        filterValue: "",
        filterKeyExt: "",
        filterValueExt: ""
      },
      /* 验证规则 */
      rules: {
        filterName: [
          { required: true, message: "请输入过滤器名称", trigger: "blur" }
        ],
        filterKey: [
          { required: true, message: "请输入过滤器KEY值", trigger: "blur" }
        ],
        filterValue: [
          { required: true, message: "请输入过滤器值", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    toggleRowExpansion (row) {
      console.log(row.id)
      this.expands = [];
      this.expands.push(row.id);
    },
    rowKey (row) {
      return row.id
    },
    /* 路由接口刷新 */
    refresh () {
      this.$axios.put('/route/refresh').then(res => {
        if (res.data.success) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "error"
          });
        }
      })
    },
    /* 路由接口检查 */
    check () {
      this.$axios.get('/actuator/gateway/routes').then(res => {
        if (res.status == 200) {
          this.$message({
            message: '代表路由配置成功',
            type: "success"
          });
        } else {
          this.$message({
            message: '代表路由配出错',
            type: "error"
          });
        }
      })
    },
    /* 新增过滤器 */
    addFilter () {
      const params = this.filterModalForm
      params["routeId"] = this.routeId
      return this.$axios
        .post("/filter", params)
        .then(res => {
          if (res.data.success) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        });
    },
    /* 修改过滤器 */
    modifyFilter () {
      const params = this.filterModalForm
      params["filterId"] = this.filterId
      return this.$axios
        .put("/filter", params)
        .then(res => {
          if (res.data.success) {
            this.$message({
              message: res.data.msg,
              type: "success"
            });
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        });
    },
    /* 删除过滤器 */
    delFilter (scope) {
      console.log(scope)
      this.$axios.delete(`/filter/${scope.id}`).then(res => {
        if (res.data.success) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          /* 删除路由数据 */
          this.tableData.forEach(item => {
            item.filterList.splice(item.filterList.findIndex(item => item.id === scope.id), 1)
          });
        } else {
          this.$message({
            message: res.data.msg,
            type: "error"
          });
        }
      })
    },
    /*打开过滤器模态窗口
     * @param opt "add"和"modify",新增和修改的模态窗口*/
    filterModalOpen (opt, scope) {
      if (opt === "add") {
        this.filterTitle = "新增过滤器";
        this.filterIsAdd = true
        this.routeId = scope.row.id;
      } else {
        this.filterTitle = "修改过滤器";
        this.filterIsAdd = false
        // console.log(scope);
        this.routeId = scope.row.id;
        this.filterId = scope.row.id;
        this.filterModalForm.filterName = scope.row.filterName;
        this.filterModalForm.filterKey = scope.row.filterKey;
        this.filterModalForm.filterValue = scope.row.filterValue;
        this.filterModalForm.filterKeyExt = scope.row.filterKeyExt;
        this.filterModalForm.filterValueExt = scope.row.filterValueExt;
      }
      this.filterModal = true;
    },
    //过滤器表单验证，新增 or 修改
    filterModalSave (formName) {
      /* 表单通过 */
      this.$refs[formName].validate((pass, obj) => {
        if (!pass) return false;
        /* 提交过滤器 */
        if (this.filterIsAdd) {
          this.addFilter().then(() => {
            /* 清空表单,关闭模态框,刷新表格 */
            this.$refs[formName].resetFields();
            this.filterModal = false
            /* 默认展开行 */
            this.getRouteList().then(() => {
              console.log(this.routeId)
              this.$refs.table.toggleRowExpansion(this.routeId, true)
            })
          })
        } else {
          this.modifyFilter().then(() => {
            /* 清空表单,关闭模态框,刷新表格 */
            this.$refs[formName].resetFields();
            this.filterModal = false
            this.getRouteList().then(() => {
              this.$refs.table.toggleRowExpansion(this.routeId, true)
            })
          })
        }
      });
    }
  },
  created () {
    this.getRouteList();
  }
};
</script>

<style scoped lang="less">
.handle-box {
  margin-bottom: 20px;
}
.handle-select {
  width: 120px;
}
.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
</style>